<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>loginpage</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>

    <!--CSS Stylesheet-->
    <link rel="stylesheet" href="css/login.css" type="text/css" media="all">

</head>
<body>
    <div class="signinform" id="signinform1">
        <h1>中国非物质文化遗产</h1>
        <!-- container -->
        <div class="container">
            <!-- main content -->
            <div class="w3l-form-info">
                <div class="w3_info">
                    <h2>Log in</h2>
                    <form action="#" method="post">
                        <div class="input-group">
                            <span><i class="fas fa-user" aria-hidden="true"></i></span>
                            <input type="text" placeholder="UserNumber" required="" v-model="userNo">
                        </div>
                        
                        <div class="input-group">
                            <span><i class="fas fa-key" aria-hidden="true"></i></span>
                            <input type="Password" placeholder="Password" required="" v-model="password">
                        </div>
                        
                        <div class="form-row bottom">
                            <div class="form-check">
                                <input type="checkbox" id="remember" name="remember" value="remember" v-model="remMe">
                                <label for="remember"> Remember Me?</label>
                            </div>
                        </div>
                        <br>
                        <div class="form-row bottom">
                            <div class="form-check">
                                <input type="checkbox" id="admin" name="admin" value="admin" v-model="admin">
                                <label for="admin"> Is Admin</label>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-block" type="primary" v-on:click.prevent="login">登录</button>
                    </form>
                    <p class="account">Don't have an account? <a href="register.html">Sign up</a></p>
                </div>
            </div>
            <!-- //main content -->
        </div>
        <!-- //container -->
        <!-- footer -->
        <div class="footer">
            <p>Design in 2024</p>
        </div>
        <!-- footer -->
    </div>

    <script src="js/fontawesome.js"></script>
</body>
<script>
    var vm = new Vue({
        el:"#signinform1",
        data:{
            userNo:"",
            password:"",
            remMe:false,
            admin: false 
        },
        mounted(){
            var userInfo = localStorage["userInfo"]==null?{userNo:"",password:""}:JSON.parse(localStorage["userInfo"]);
            this.userNo = userInfo.userNo;
            this.password = userInfo.password;
            this.remMe = localStorage["isRem"]=="true"?true:false;
        },
        methods: {
            login:function(){
                var userInfo = {
                    userNo:"",
                    password:"",
                    phone:"",
                    email:"",
                    address:"",
                    Token:"",
                    isForbidden:"",
                    userIcon:""
                };
                var userNo = this.userNo;
                var password = this.password;
                var remMe = this.remMe;
                var url = this.admin ? "https://localhost:7071/api/admin?" : "https://localhost:7071/api/user?";
                axios.get(`${url}name=${userNo}&password=${encodeURIComponent(password)}`).then((res) => {
                if (res.data!="用户名或密码错误") { 
                    localStorage["token"] = res.data.Token;
                    localStorage["isRem"] = remMe;
                    localStorage["userid"] = res.data.id;
                    localStorage["relativePath"] = res.data.userIcon;
                    if (remMe) {
                        userInfo.userNo = userNo;
                        userInfo.password = password;
                        userInfo.phone = res.data.phone;
                        userInfo.email = res.data.email;
                        userInfo.address = res.data.address;
                        userInfo.Token = res.data.Token;
                        userInfo.isForbidden = res.data.isForbidden;
                        userInfo.userIcon = res.data.userIcon;
                        localStorage["userInfo"] = JSON.stringify(userInfo);
                    } else {
                        localStorage.removeItem("userInfo");
                    }

                    if (this.admin) {
                        location.href = "admin.html"; // 管理员跳转到 admin 页面
                    } else {
                        location.href = "index.html"; // 普通用户跳转到 index 页面
                    }
                } else {
                    // 处理用户名或密码错误的情况
                    alert("用户名或密码错误");
                }
                }).catch((error) => {
                    console.error("Login error:", error);
                    alert("登录请求失败，请稍后再试。"); // 网络错误提示
                });
            },
            back:function(){
                history.go(-1);
            }
        },
    })
</script>
</html>